<!--弹出框-->
<template>
  <!--     弹出框弹出框-->
  <el-dialog :visible.sync="dialogVisible" center width="700px">
    <div class="dialog_content">
      <div class="dialog_title">新增电话用户</div>
      <el-form ref="dialogFrom" :model="dialogDate" label-width="180px">
        <el-form-item
          :rules="[
            { required: true, message: '电话不能为空', trigger: 'change' },
            { type: 'number', message: '电话必须为数字值', trigger: 'change' },
          ]"
          label="电话："
          prop="phone"
        >
          <el-col :span="11">
            <el-input
              v-model.number="dialogDate.phone"
              :clearable="true"
              :show-word-limit="true"
              maxlength="11"
              minlength="11"
              placeholder="请输入11位电话号码"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="水票：" prop="residueWaterCoupon">
          <el-col :span="11">
            <el-input v-model.number="dialogDate.residueWaterCoupon"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="额度(可 / 已使用额度)" prop="amount">
          <el-row>
            <el-col :span="4">已使用：</el-col>
            <el-col :span="7">
              <el-input
                v-model.number="dialogDate.amount.used"
                placeholder="已使用额度"
              ></el-input>
            </el-col>
            <el-col :offset="1" :span="4">可使用：</el-col>
            <el-col :span="7">
              <el-input
                v-model.number="dialogDate.amount.available"
                placeholder="可使用额度"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="历史充值：" prop="historyPay">
          <el-col :span="8">
            <el-input
              v-model.number="dialogDate.historyPay"
              placeholder="请输入历史充值金额"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="已付押金 / 手上桶数" prop="purchased">
          <el-row>
            <el-col :span="4">已付押金</el-col>
            <el-col :span="7">
              <el-input
                v-model.number="dialogDate.purchased.deposit"
                placeholder="请输入已支付押金"
              ></el-input>
            </el-col>
            <el-col :offset="1" :span="4">手上桶数</el-col>
            <el-col :span="7">
              <el-input
                v-model.number="dialogDate.purchased.barrelage"
                placeholder="请输入手上桶数"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="已 / 未付押金桶数" prop="barrel">
          <el-row>
            <el-col :span="3">已付：</el-col>
            <el-col :span="8">
              <el-input
                v-model.number="dialogDate.barrel.prepaid"
                placeholder="已支付押金桶数"
              ></el-input>
            </el-col>
            <el-col :offset="1" :span="3">未付：</el-col>
            <el-col :span="8">
              <el-input
                v-model.number="dialogDate.barrel.unpaid"
                placeholder="未支付押金桶数"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="所属销售：" prop="market">
          <el-select v-model="dialogDate.market" placeholder="请选择销售">
            <el-option label="系统默认销售" value="系统默认销售"></el-option>
            <el-option label="销售主管" value="销售主管"></el-option>
            <el-option label="销售L" value="销售L"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前状态：" prop="status">
          <el-switch
            v-model="dialogDate.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          <span style="margin-left: 10px">
            {{ dialogDate.status ? "启用" : "未启用" }}
          </span>
        </el-form-item>
      </el-form>
    </div>

    <div class="dialog_footer">
      <el-button @click="offDialog">取 消</el-button>
      <el-button type="primary" @click="dialogAdd">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import getTime from "@/utils/getTime";

export default {
  data() {
    return {
      // 表单数据
      dialogDate: {
        userId: 22225,
        phone: "",
        wxName: "——",
        remark: "",
        wxProfile: "",
        residueWaterCoupon: 0,
        // 额度
        amount: {
          used: 0,
          available: 0, // 可使用
        },
        historyPay: 0,
        // "已付押金/手上桶数"
        purchased: {
          deposit: 0,
          barrelage: 0,
        },
        // "已/未付押金桶"
        barrel: {
          prepaid: 0,
          unpaid: 0,
        },
        market: "系统默认主管",
        updateTime: getTime(),
        status: false,
      },
      dialogVisible: false, // 弹窗控制变量
    };
  },
  methods: {
    // 清空
    removeAll() {
      // 重置表单
      this.$refs.dialogFrom.resetFields();
    },
    // 新增
    dialogAdd() {
      let that = this;
      // 校验
      this.$refs.dialogFrom.validate((valid) => {
        if (valid) {
          this.dialogDate.remark = "订水用户" + this.dialogDate.phone;
          // 将数据传递至父组件
          that.$emit("addList", JSON.stringify(this.dialogDate));
          // 关闭弹窗
          that.offDialog();
        } else {
          return false;
        }
      });
    },
    // 结束清空弹窗数据，关闭弹窗
    offDialog() {
      // 回复初始值
      this.removeAll();
      // 关闭弹窗
      this.dialogVisible = false;
    },

    // 开启弹窗，判断是新增还是修改事件
    showDialog() {
      // 开启弹窗
      this.dialogVisible = true;
    },
  },
};
</script>
<style scoped>
/deep/ .el-dialog__header {
  padding: 0;
}

/deep/ .el-dialog__body,
/deep/ .el-dialog--center .el-dialog__body {
  padding: 0;
}

.form_btn .el-button {
  font-size: 28px;
  margin-left: 15px;
}
</style>
